<template>
  <div class="app-container">
    <!-- 类型管理新增 -->
    <h5 class="titleInfo">基础信息</h5>
    <el-form ref="form"  :inline="true" :model="form" label-width="150px" disabled>
      <el-row>
        <el-col :span="12">
          <el-form-item label="公司全称">
            <el-input v-model="form.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司简称">
            <el-input v-model="form.nick" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法定代表人姓名">
            <el-input v-model="form.legalName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法定代表人身份证号/护照号">
            <el-input v-model="form.legalIdCard" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织机构代码">
            <el-input v-model="form.organCode" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业注册类型" prop="organType">
            <el-select v-model="form.organType" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in organTypeClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位类型" prop="companyType">
            <el-select v-model="form.companyType" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in companyTypeClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成立时间" prop="foundingTime">
            <el-date-picker v-model="form.foundingTime" type="date" placeholder="选择日期" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法定代表人归属地" prop="legalLocate">
            <el-select v-model="form.legalLocate" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in legalLocateClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册用户类型" prop="userType">
            <el-select v-model="form.userType" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in userTypeClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经营范围" prop="scope">
            <el-input v-model="form.scope" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分公司类型" prop="officeType">
            <el-select v-model="form.officeType" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in officeTypeClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 经营信息 -->
      <div class="divBar"></div>
      <h5 class="titleInfo">经营信息</h5>
      <el-row>
        <el-col :span="12">
          <el-form-item label="代理人姓名" prop="agentName">
            <el-input v-model="form.agentName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="代理人手机" prop="agentPhone">
            <el-input v-model="form.agentPhone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="代理人身份证号" prop="agentIdentity">
            <el-input v-model="form.agentIdentity" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- <el-form-item label="选择地区" prop="address"> -->
          <!-- <el-cascader
              v-model="selectedOptions"
              placeholder="请选择地区"
              :options="options"
              @change="pcaList"
          />-->
          <!-- <el-cascader-multi v-model="form.address" :data="options"></el-cascader-multi> -->

          <!-- <p v-for="item in form.areaInfo" :key="item.id">
              {{item.name}}
              <span v-for="abc in item.children" :key="abc.id">>{{abc.name}}</span>
            </p>
          </el-form-item>-->
          <el-form-item label="选择地区：" disabled>
            <el-select v-model="province" placeholder="请选择省">
              <el-option
                v-for="item in provinces"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              v-if="flag"
              v-model="city"
              :loading="loadingCity"
              @change="cityChanged"
              placeholder="请选择市"
            >
              <el-option
                v-for="item in cities"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <!-- <select name id @change="cityChanged()">
              <option :value="item.value" v-for="item in cities" :key="item.label">{{item.label}}</option>
            </select>-->
            <div>
              <el-tag
                :key="tag.value"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
              >{{tag.label}}</el-tag>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登录密码" prop="type">
            <el-input v-model="form.managerPhone" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 配额信息 -->
      <div v-if="form.officeType!=0">
      <div class="divBar"></div>
      <h5 class="titleInfo">配额信息</h5>
      <el-row>
        <el-col :span="12">
          <el-form-item label="首次缴款" prop="type">
            <span>{{form.beginMoney}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="累计缴款" prop="type">
            <span>{{form.totalMoney}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联创配额/已使用" prop="type">
            <span>{{form.totalUnion}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总经理配额/已使用" prop="type">
            <span>{{form.totalGm}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      </div>
    </el-form>
  </div>
</template>
<script>
import { regionDropDown } from "@/api/area";
import { filialeFOIndexListDetails, getAddress } from "@/api/financialOther";
export default {
  name: "filialeFODetail",
  filters: {},
  data() {
    return {
      flag: false,
      loadingCity: false,
      province: "",
      city: "",
      citychild: "",
      provinces: [],
      cities: [],
      dynamicTags: [],
      form: {
        name: "",
        nick: "",
        legalName: "",
        legalIdCard: "",
        organCode: "",
        organType: "",
        companyType: 0,
        foundingTime: "",
        legalLocate: "",
        userType: "",
        address: [],
        scope:"",
        areas: [],
        officeType: null,
        province: null,
        city: null,
        foundingTime: ""
      },
      id: 0,
      options: [],
      selectedOptions: [],
      //企业注册类型 0-组织机构代码号;1-多证合一，传递社会信用代码号;2-企业工商注册码;23-其它
      organTypeClass: [
        { value: 0, label: "组织机构代码号" },
        { value: 1, label: "多证合一，传递社会信用代码号" },
        { value: 2, label: "企业工商注册码" },
        { value: 23, label: "其它" }
      ],
      //单位类型 0-普通企业，1-社会团体，2-事业单位，3-民办非企业单位，4-党政及国家机构，默认0
      companyTypeClass: [
        { value: 0, label: "普通企业" },
        { value: 1, label: "社会团体" },
        { value: 2, label: "事业单位" },
        { value: 3, label: "民办非企业单位" },
        { value: 4, label: "党政及国家机构" }
      ],
      //法定代表人归属地 0-大陆;1-香港;2-澳门;3-台湾;4-外籍;23-其它（企业账号中的企业法人、代理人不支持）
      legalLocateClass: [
        { value: 0, label: "大陆" },
        { value: 1, label: "香港" },
        { value: 2, label: "澳门" },
        { value: 3, label: "台湾" },
        { value: 4, label: "外籍" },
        { value: 23, label: "其它（企业账号中的企业法人、代理人不支持）" }
      ],
      //注册用户类型 1-代理人注册;2-法人注册;0-不注册法人或代理人
      userTypeClass: [
        { value: 0, label: "不注册法人或代理人" },
        { value: 1, label: "代理人注册" },
        { value: 2, label: "法人注册" }
      ],
      //分公司类型 0:省分公司、1:省运营中心、2:市运营中心
      officeTypeClass: [
        { value: 0, label: "省分公司" },
        { value: 1, label: "省运营中心" },
        { value: 2, label: "市运营中心" }
      ]
    };
  },
  watch: {
    // 监听地区选项
    "form.address": function(val) {
      // console.log(val[0]);
      // if (val) {
      //   this.form.areas = val[0];
      // }
    }
  },
  created() {
    this.getArea();
  },
  mounted() {
    this.form.id = this.$route.query.id;
    this.getDetail();
  },
  methods: {
    //获取详情
    getDetail() {
      const datas = { id: this.$route.query.id - 0 };
      filialeFOIndexListDetails(datas).then(res => {
        // console.log(res)
        this.form = res.data.data;
        let arr = [];
        this.form.areaInfo.map(res => {
          res.children.map(data => {
            let obj = { value: data.id, label: data.name };
            arr.push(obj);
          });
        });
        // console.log(arr);
        // this.city = [...arr];
        this.dynamicTags = [...arr];
      });
    },
    // 省市区
    getArea() {
      getAddress({ id: 1 }).then(res => {
        // console.log(res);
        const newArr = [];
        res.data.data.forEach((item1, index) => {
          newArr.push({
            value: item1.id,
            label: item1.name
          });
          if (item1.children != null) {
            newArr[index]["children"] = [];
            item1.children.forEach(item2 => {
              newArr[index]["children"].push({
                value: item2.id,
                label: item2.name
              });
            });
          }
        });
        this.options = newArr;
        //
        this.provinces = newArr;
      });
    },
    // 省市区数据改变
    pcaList(value) {
      let e = this.selectedOptions;
      this.form.province = e[0];
      this.form.city = e[1];
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 0px !important;
}
.form {
  margin-left: 268px;
}
.el-switch__label--left {
  margin-right: 0;
}
.el-switch__label.is-active {
  color: #409eff !important;
  width: 100%;
  text-align: center;
  display: inline-block;
}
</style>
